<h3 class="title">&nbsp;</h3>
<div class="box-inner">
	<div class="slider">
        <div class="slider-wraper float-left">
            <ul class="unstyled">
                <?php foreach ($slides as $k=>$v):?>
				<li id="slider-<?php echo $k+1;?>"><a href="<?php echo $v['url'];?>"><img src="<?php echo base_url($v['img_url']);?>" /></a><p class="slider-txt"><?php echo $v['img_title'];?></p></li>                 
                <?php endforeach;?>
        	</ul>
        </div>
		<ul class="slider-nav float-left unstyled">
			<?php foreach ($slides as $k=>$v):?>
			<li><a href="<?php echo $v['url'];?>" rel="<?php echo $k+1;?>" id="slidernav-<?php echo $k+1;?>"><img src="<?php echo base_url($v['img_url']);?>" /></a></li>
            <?php endforeach;?>
		</ul>
		<span id="slider-cursor" class="cursor"></span>
	</div>
</div>
<script type="text/javascript">	
//首页图片轮播
var slider_id = 2, slider_height = 290, slider_nav_block_height = 52, slider_nav_block_dx = 6;
var slider_txt_height = 50, slider_total = $('.slider-nav li').length, slider_timer;
$(function(){
	$('.slider-nav a').mouseover(function(){
		slider_id = $(this).attr('rel');
		slider_timer = setTimeout('slider_animate()', 200);
	}).mouseout(function(){
		clearTimeout(slider_timer);
	});
	slider_timer = setInterval('slider_animate()', 5000);
});
function slider_animate() {
	$('#slider-' + slider_id + ' .slider-txt').animate({
		bottom: -slider_txt_height
	}, 400);
	$('.slider-wraper ul').animate({
		top: ( slider_id - 1 ) * -slider_height
	}, 400);
	$('#slider-cursor').animate({
		top: slider_id * slider_nav_block_height - slider_nav_block_height / 2 + ( slider_id - 1 ) * slider_nav_block_dx
	}, "slow", "swing");
	$('#slider-' + slider_id + ' .slider-txt').animate({
		bottom: 0
	}, 400);
	$('.slider-nav a').animate({opacity: 0.6}, 0);
	$('#slidernav-' + slider_id).animate({opacity: 1}, "slow", "swing");
	slider_id++;
	if ( slider_id > slider_total ) slider_id = 1;
}
</script>
		